今天我們來跟著官方範例略懂i18n是怎麼做的
官方文章

手做範例codesandbox

只有3個檔案，有耐心點看完吧~

首先在src新增一個資料夾plugins，在裡面新增一個i18n.js檔案

/src/plugins/i18n.js

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 注入一個global $translate() 方法--註1
    app.config.globalProperties.$translate = (key) => {
      // key是外面傳入的字串 ex: "greetings.hello"
      console.log("從vue傳入的字串: ", key);
      // key會先切割成 ["greetings", "sayHi1"]
      // 對物件做遞迴--註2
      return key.split(".").reduce((o, k) => {
        if (o) return o[k];
      }, options);
    };
  }
};

/** 註1
 * 上面注入方法不呼叫，而是給外面呼叫的概念如果有點陌生
 * 可以看下面的例子:
 * let log = console.log
 * let hi = "hihi"
 * log(hi) //hihi
 */

/** 註2
 * 建議看看這篇: https://w3c.hexschool.com/blog/a2cb755f
//宣告一陣列
const arr = ["greetings", "sayHi"];
//宣告一i18n物件,當作起點
const obj = {
  greetings: {
    hello: "Bonjour!",
    sayHi: "hi"
  }
};
//使用 reduce 遞迴物件回傳 value
const ans = arr.reduce((o, k) => {
  //console.log(o, k) //可以印出來看看
  if (o) return o[k];
}, obj);
console.log(ans);
*/

接著修改 main.js

/src/main.js

import { createApp } from "vue";
import App from "./App.vue";
// 引入i18n
import i18nPlugin from "./plugins/i18n";

// createApp(App).mount("#app");

const app = createApp(App);
const i18nConfig = {
  greetings: {
    hello: "Bonjour!",
    sayHi: "hi"
  }
};
// 全域引入
app.use(i18nPlugin, i18nConfig);
// 再掛載
app.mount("#app");

因為已經全域引用了所以可以在.vue直接使用

/src/App.vue

<template>
  <!-- undefined -->
  <h1>{{ $translate("greetings.sayHi1") }}</h1>
  <!-- Bonjour! -->
  <h1>{{ $translate("greetings.hello") }}</h1>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
</style>

小結

寫一個客製化套件需要 export 一個物件，裡面要有 install 屬性
參數是 app 和 自定義的參數

可以在 app.config.globalProperties 定義全域方法
例如上面寫的 app.config.globalProperties.$translate

如此一來掛載後便可以在.vue使用 $translate("greetings.sayHi1")